<template>

  <div class="ipad-box">
    <el-image fit="cover" style="height: 100%;width: 100%;" :src="bgImg" />
    <div class="main flex">
      <div class="lt">
        <div class="img">
          <el-image v-if="appInfo.icon" fit="fill" style="height: 100%;width: 100%;" :src="appInfo.icon" />
        </div>
        <div class="info">
          <div class="title overflow-ellipsis" style="max-width: 10em;">{{ appInfo.appName||'加载失败' }}</div>
          <div class="sub-title overflow-ellipsis" style="max-width: 12em;">{{ appInfo.appName||'developerName' }}</div>
          <div class="ad">Ad</div>
        </div>
      </div>
      <div class="rt">
        <div class="btn">获取</div>
        <div class="sec">App内购买项目</div>

      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    appInfo: {
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      bgImg: require('@/assets/images/create/ipad-pre.svg')
    }
  },
  watch: {
    appInfo: {
      deep: true,
      immediate: true,
      handler: function(newval, oldval) {
      }
    }
  }
}
</script>

<style lang="scss">
  .ipad-box {
    transform: scale(0.388);
    background-repeat: no-repeat;
    width: 1070px;
    height: 772px;
    position: absolute;
    left: -330px;
    top: -236px;
    // z-index: -1;

    .main {
      position: absolute;
      left: 68px;
      top: 440px;
      width: 444px;
      height: 88px;
      padding: 12px;
      background: #EDF6FF;
      border: 1px solid #E2E7EB;
      box-sizing: border-box;
      border-radius: 22px;

      .lt {
        display: flex;
        align-self: center;
        justify-content: flex-start;

        .img {
          width: 60px;
          height: 64px;
          background: #C4C4C4;
          border-radius: 4px;
          margin-right: 8px;
          overflow: hidden;
        }

        .info {
          .title {
            font-weight: bold;
            font-size: 20px;
            line-height: 24px;
            /* identical to box height, or 120% */
            color: #000000;

          }

          .sub-title {
            padding-top: 4px;
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 16px;
          }

          .ad {
            margin-top: 4px;
            width: 25px;
            height: 16px;
            font-size: 12px;
            color: white;
            line-height: 16px;
            background: #9CC8F5;
            border-radius: 4px;

          }
        }
      }

      .rt {
        .btn {
          color: #3B8DF1;
          font-weight: 500;
          font-size: 18px;
          line-height: 36px;
          text-align: center;
          width: 102px;
          height: 36px;
          background: #FFFFFF;
          border-radius: 20px;
        }

        .sec {

          padding-top: 6px;
          font-weight: 500;
          font-size: 6px;
          text-align: center;
          color: rgba(0, 0, 0, 0.5);
          // zoom: 0.5;
          // transform: scale(0.5);
          -webkit-text-size-adjust: none;
        }
      }
    }
  }
</style>
